<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>llamafile</title>
<link rel="stylesheet" href="chatbot.css">
<link rel="stylesheet" href="highlight.css">

<div class="chat-container" id="chat-interface">
  <div class="chat-header">
    <h1>
      <img src="chatbot.png"
           width="64" height="64"
           id="logo" style="display:none"
           alt="[llamafile]" title="llamafile">
      <span id="model">loading...</span>
    </h1>
    <div class="menu-dropdown">
      <button class="menu-trigger">▼</button>
      <div class="menu">
        <button class="menu-item" id="chat-mode-switch">Switch to Completions Mode</button>
      </div>
    </div>
  </div>
  <div class="chat-messages" id="chat-messages">
    <div class="message system">
      Loading...
    </div>
  </div>
  <div id="prefill-status">
    <div class="prefill-progress">
      <div class="progress-bar"></div>
    </div>
  </div>
  <div class="chat-input-container noprint">
    <textarea class="chat-input" id="chat-input" placeholder="Type your message..." rows="1" autocomplete="off"></textarea>
    <button class="send-button" id="send-button">Send</button>
    <button class="stop-button" id="stop-button" style="display:none">Stop</button>
    <button class="settings-button" id="settings-button" title="Settings"><img src="gear.svg" alt="[settings]" width="30" height="30"></button>
    <button class="redo-button" id="redo-button" title="Redo last message"><img src="redo.svg" alt="[redo]" width="30" height="30"></button>
    <button class="upload-button" id="upload-button" title="Upload"><img src="upload.svg" alt="[upload]" width="30" height="30"></button>
    <input type="file" id="file-upload" style="display: none">
  </div>
</div>

<div class="completions-container" id="completions-interface" style="display:none">
  <div class="chat-header">
    <h1>
      <img src="chatbot.png" alt="[llamafile]" title="llamafile" width="64" height="64">
      <span id="model-completions">llamafile</span>
    </h1>
    <div class="menu-dropdown">
      <button class="menu-trigger">▼</button>
      <div class="menu">
        <button class="menu-item" id="completions-mode-switch">Switch to Chat Mode</button>
      </div>
    </div>
  </div>
  <div class="completions-content">
    <textarea id="completions-input" placeholder="Enter your text here..."></textarea>
    <div class="completions-controls">
      <button class="complete-button" id="complete-button">Complete</button>
      <button class="stop-button" id="completions-stop-button" style="display:none">Stop</button>
      <button class="settings-button" id="completions-settings-button" title="Settings">⚙️</button>
    </div>
  </div>
</div>

<div id="settings-modal" class="settings-modal" style="display:none">
  <div class="settings-panel">
    <div class="settings-header">
      <h2>Model Settings</h2>
      <button id="close-settings"><img src="close.svg" alt="[x]" width="24" height="24"></button>
    </div>
    <div class="setting-item">
      <label>temperature = <span id="temp-value">0.8</span></label>
      <input type="range" id="temperature" min="0" max="2" step="0.01" value="0.8">
      <p class="setting-description">How much randomness to use during sampling. Higher values improve improvisation, and lower values result in determinism.</p>
    </div>
    <div class="setting-item">
      <label>top_p = <span id="top-p-value">0.95</span></label>
      <input type="range" id="top-p" min="0.01" max="1" step="0.01" value="0.95">
      <p class="setting-description">Controls diversity via nucleus sampling. Reduces the probability mass from which to sample.</p>
    </div>
    <div class="setting-item">
      <label>presence_penalty = <span id="presence-value">0</span></label>
      <input type="range" id="presence-penalty" class="penalty-range" min="-2" max="2" step="0.1" value="0">
      <p class="setting-description">Positive values discourage repetition; negative values encourage it.</p>
    </div>
    <div class="setting-item">
      <label>frequency_penalty = <span id="frequency-value">0</span></label>
      <input type="range" id="frequency-penalty" class="penalty-range" min="-2" max="2" step="0.1" value="0">
      <p class="setting-description">Penalizes new tokens based on their frequency in the text so far.</p>
    </div>
  </div>
</div>
<div id="bottom"></div>

<script src="ctype.js"></script>
<script src="clipboard.js"></script>
<script src="highlight.js"></script>
<script src="highlight_txt.js"></script>
<script src="highlight_markdown.js"></script>
<script src="highlight_cpp.js"></script>
<script src="highlight_c.js"></script>
<script src="highlight_d.js"></script>
<script src="highlight_cxx.js"></script>
<script src="highlight_ada.js"></script>
<script src="highlight_asm.js"></script>
<script src="highlight_basic.js"></script>
<script src="highlight_cobol.js"></script>
<script src="highlight_csharp.js"></script>
<script src="highlight_forth.js"></script>
<script src="highlight_fortran.js"></script>
<script src="highlight_go.js"></script>
<script src="highlight_haskell.js"></script>
<script src="highlight_js.js"></script>
<script src="highlight_css.js"></script>
<script src="highlight_php.js"></script>
<script src="highlight_html.js"></script>
<script src="highlight_java.js"></script>
<script src="highlight_julia.js"></script>
<script src="highlight_kotlin.js"></script>
<script src="highlight_ld.js"></script>
<script src="highlight_lisp.js"></script>
<script src="highlight_lua.js"></script>
<script src="highlight_m4.js"></script>
<script src="highlight_make.js"></script>
<script src="highlight_matlab.js"></script>
<script src="highlight_ocaml.js"></script>
<script src="highlight_pascal.js"></script>
<script src="highlight_perl.js"></script>
<script src="highlight_python.js"></script>
<script src="highlight_r.js"></script>
<script src="highlight_ruby.js"></script>
<script src="highlight_rust.js"></script>
<script src="highlight_scala.js"></script>
<script src="highlight_shell.js"></script>
<script src="highlight_sql.js"></script>
<script src="highlight_swift.js"></script>
<script src="highlight_tcl.js"></script>
<script src="highlight_tex.js"></script>
<script src="highlight_typescript.js"></script>
<script src="highlight_zig.js"></script>
<script src="highlight_cmake.js"></script>
<script src="render_markdown.js"></script>

<script src="chatbot.js"></script>
